<template>
    <div id="mirror-manage">
        <div class="search-box">
            <el-form :inline="true" ref="searchForm" :model="searchForm">
                <el-form-item label="镜像来源: ">
                    <el-select v-model="searchForm.MirrorSelectValue" placeholder="请选择镜像来源">
                        <el-option v-for="item in searchForm.MirrorSelectOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <div class="button-style" @click="SelectFn">搜 索</div>
                </el-form-item>
                <el-form-item class="fr">
                    <div class="button-style" @click="BatchDelete">批量删除</div>
                </el-form-item>
                <el-form-item class="fr" v-if="roles == 'SUPER_ADMIN'">
                    <div class="button-style" @click="ModifyMirror(1)">添 加</div>
                </el-form-item>
            </el-form>
        </div>
        <div class="table">
            <el-table  :data="tableData" ref="multipleTable"  style="width: 100%" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="100"></el-table-column>
                <el-table-column prop="imageName"label="镜像名称"></el-table-column>
                <el-table-column prop="imageNameInDocker"label="Docker镜像名称" v-if="roles == 'SUPER_ADMIN'"></el-table-column>
                <el-table-column prop="imageSource" label="镜像来源">
                    <template slot-scope="scope">
                        <span v-if="scope.row.imageSource == 1">系统预置</span>
                        <span v-if="scope.row.imageSource == 2">教师制作</span>
                    </template>
                </el-table-column>
                <el-table-column label="制作人">
                    <template slot-scope="scope">
                        <span v-if="scope.row.username">{{ scope.row.username }}</span>
                        <span v-else>一</span>
                    </template>
                </el-table-column>
                <el-table-column prop="description"label="镜像简介"></el-table-column>
                <el-table-column fixed="right" label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="ModifyMirror(2,scope.row)">操作</el-button>
                        <el-button type="text" size="small" @click="Delete(scope.row.imageId)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-size="pagesize"
                layout="total, prev, pager, next, jumper"
                :total="totalCount">
            </el-pagination>
        </div>
        <el-dialog :close-on-click-modal="false" class="dialog-add-distribution" title="修改镜像信息" :visible.sync="dialogMirrorInfo" v-if="dialogMirrorInfo" width="820px">
            <el-form  label-width="100px" :rules="MirrorFormRules" :model="MirrorForm" ref='MirrorForm'>
                <el-form-item label="镜像名称：" prop="MirrorName">
                    <el-input type="text" v-model="MirrorForm.MirrorName" maxlength="20" @input="MirrorNameInput"></el-input>
                    <p style="position:absolute; left:240px; top: 12px;"> {{MirrorForm.MirrorNameNum}}/20</p>
                </el-form-item>
                <el-form-item label-width="140px" label="Docker镜像名称：" prop="DockerMirrorName" v-if="roles == 'SUPER_ADMIN'">
                    <el-input type="text" v-model="MirrorForm.DockerMirrorName"></el-input>
                </el-form-item>
                <div>
                    <span class="label" style="margin:6px 0 0px 8px"><span style="color:#F56C6C">*</span> 镜像图标：</span>
                    <div class="distribution-swpier">
                        <swiper :options="swiperDialogOption" >
                            <swiper-slide v-for="(item, index) in iconListData" :key="index">
                                <div class="distribution-box" @click="IconChange(item.icon)">
                                    <img :src="item.iconUrl" />
                                    <i class="iconfont icon-zhengque" v-if="item.icon == MirrorForm.iconId"></i>
                                </div>
                            </swiper-slide>
                        </swiper>
                        <div class="swiper-btn swiper-button-prev" slot="button-prev" v-show="iconListData.length > 4">
                            <i class="iconfont icon-xiangzuo-copy"></i>
                        </div>
                        <div class="swiper-btn swiper-button-next" slot="button-next" v-show="iconListData.length > 4">
                            <i class="iconfont icon-xiangyou"></i>
                        </div>
                    </div>
                </div>
                <div class="clear-fix"></div>
                <el-form-item label="镜像简介：" prop="MirrorDesc">
                    <el-input type="textarea" v-model="MirrorForm.MirrorDesc" maxlength="200" @input="MirrorDescInput"></el-input>
                    <p style="position:absolute; left: 610px; bottom: 0px;"> {{MirrorForm.MirrorDescNum}}/200</p>
                </el-form-item>

                <div class="footer" style="text-align:center;">
                    <el-button class="button-style saveBtn" @click="MirrorFormSave('MirrorForm')">保存</el-button>
                </div>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
    components: {
        swiper,
        swiperSlide
    },
    name: 'carrousel',
    data () {
        return {
            //角色
            roles: '',
            // 管理弹窗轮播组件data
            swiperDialogOption: {
                slidesPerView: 5,
                spaceBetween: 24,
                initialSlide: 1,
                loop: true,
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
            },
            iconListData: '',
            // 课程ID
            coursesId: '',
            searchForm: {
                MirrorSelectOptions: [
                    {
                        label: '全部',
                        value: 0
                    },
                    {
                        label: '教师制作',
                        value: 2
                    },
                    {
                        label: '系统预置',
                        value: 1
                    }
                ],
                MirrorSelectValue: 0
            },
            // 镜像信息弹窗
            dialogMirrorInfo: false,
            // 镜像表单
            MirrorForm: {
                // 镜像名称
                MirrorName: '',
                // Docker镜像名称
                DockerMirrorName:'',
                // 镜像名称长度
                MirrorNameNum: 20,
                // // 镜像类型
                // MirrorTypeOptions: [
                //     {
                //         label: '语言类',
                //         value: 1
                //     },
                //     {
                //         label: 'Hadoop生态',
                //         value: 2
                //     },
                //     {
                //         label: '机器学习',
                //         value: 3
                //     }
                // ],
                // MirrorTypeValue: '',
                // 镜像简介
                MirrorDesc: '',
                // 镜像简介长度
                MirrorDescNum: 200,
                // 选中的镜像图标ID
                iconId: '',
                // 镜像ID
                imageId: ''
            },
            MirrorFormRules:{
                MirrorName: [
                    { required: true, message: '请输入镜像名称', trigger: 'blur' },
                ],
                DockerMirrorName: [
                    { required: true, message: '请输入Docker镜像名称', trigger: 'blur' },
                ],
                MirrorDesc: [
                    { required: true, message: '请输入镜像简介', trigger: 'blur' },
                ]
            },
            // 添加或修改标记
            tag: '',
            // label宽
            labelWidth: '100px',
            // 是否强删值
            force: false,
            // 表单数据
            tableData: [],
            currentPage: 1,
            pagesize: 10,
            totalCount: 0,
            // 全选集合
            multipleSelection: []
        }
    },
    created () {
        let self = this
        // 从状态管理获取roles
        self.roles = self.$store.state.user.roles[0];
        // 课程ID
        self.coursesId = self.$localstorage.getLocalStorage('setCourseId')
        // 初始化镜像列表
        self.InitImageList()
    },
    methods: {
        // 查询镜像列表
        InitImageList(){
            let self = this
            self.$http.get('/tes/image/page?pageNum='+self.currentPage+'&pageSize='+self.pagesize+'&imageSource='+self.searchForm.MirrorSelectValue).then(response => {
                let res = response.data
                if(res.code == '200'){
                    self.tableData = res.data.content
                    self.totalCount = res.data.total
                }else{
                    self.$message.error(res.message)
                }
            }).catch(err => {
                console.log(err)
            })
        },
        // 分页
        handleSizeChange: function (size) {
            this.pagesize = size;
        },
        handleCurrentChange: function(currentPage) {
            this.currentPage = currentPage
            this.InitImageList()
        },
        // 全选存值
        handleSelectionChange(val) {
            let valArr = []
            for(let i = 0; i < val.length; i++){
                valArr.push(val[i].imageId)
            }
            this.multipleSelection = valArr
        },
        // 修改弹窗
        ModifyMirror(tag, item){
            let self = this
            self.tag = tag
            // if(self.roles == 'SUPER_ADMIN'){
            //     self.labelWidth = '140px'
            // }
            // 镜像名称
            self.MirrorForm.MirrorName = ''
            // 镜像名称长度
            self.MirrorForm.MirrorNameNum = 20
            self.MirrorForm.DockerMirrorName = ''
            self.MirrorForm.iconId = ''
            // 镜像简介
            self.MirrorForm.MirrorDesc = ''
            // 镜像简介长度
            self.MirrorForm.MirrorDescNum = 200
            self.swiperDialogOption.initialSlide = 1
            self.iconListData = ''
            self.$http.get('/tes/image/icon').then(response => {
                let res = response.data
                if(res.code == '200') {
                    self.iconListData = res.data
                }else{
                    self.$message.error(res.message)
                }
            }).catch(err => {
                console.log(err)
            })
            if(tag == 1){
                self.dialogMirrorInfo = true
            }
            // tag 标记 如果是1就是添加 2.就是修改
            if(tag == 2){
                self.$http.get('/tes/image/'+item.imageId) .then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                        let iconIdIndex
                        // 镜像名称
                        self.MirrorForm.MirrorName = res.data.imageName
                        // 镜像名称长度
                        self.MirrorForm.MirrorNameNum = 20 - res.data.imageName.length
                        // 镜像类型
                        self.MirrorForm.DockerMirrorName = res.data.imageNameInDocker
                        // self.MirrorForm.MirrorTypeValue = res.data.imageType
                        // 镜像简介
                        self.MirrorForm.MirrorDesc = res.data.description
                        // 镜像简介长度
                        self.MirrorForm.MirrorDescNum = 200 - res.data.description.length
                        // 选中的镜像图标ID
                        self.MirrorForm.iconId = res.data.icon
                        // 镜像ID
                        self.MirrorForm.imageId = res.data.imageId
                        iconIdIndex = self.indexOfFn(self.iconListData,self.MirrorForm.iconId)
                        self.swiperDialogOption =  {
                            slidesPerView: 5,
                            spaceBetween: 24,
                            initialSlide: iconIdIndex,
                            loop: false,
                            navigation: {
                                nextEl: '.swiper-button-next',
                                prevEl: '.swiper-button-prev',
                            },
                        }
                        self.dialogMirrorInfo = true
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            }
        },
        indexOfFn(arr,item){
            for(let i = 0; i < arr.length; i++){
                if(arr[i].icon == item){
                    return i;
                }
            }
        },
        // 图标切换
        IconChange(id){
            let self = this
            self.MirrorForm.iconId = id
        },
        // 删除镜像
        Delete(imageId){
            let self = this
            self.$confirm('是否删除选中?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                self.DeleteAxios(imageId)
            }).catch(() => {
            })
        },
        DeleteAxios(imageId){
            let self = this
            self.$http.delete('/tes/image/'+imageId+'?force='+self.force).then(response => {
                let res = response.data
                if(res.code == '200'){
                    self.$message({
                        message: '删除成功',
                        type: 'success'
                    })
                    self.force = false
                    // 初始化镜像列表
                    self.InitImageList()
                }else if(res.code == '500400'){
                    // 强制删除提示
                    self.$confirm(res.message, '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        self.force = true
                        self.DeleteAxios(imageId)
                    }).catch(() => {
                    })
                }else{
                    self.$message.error(res.message)
                }
            }).catch(err => {
                console.log(err)
            })
        },
        // 镜像名称
        MirrorNameInput(){
            let self = this
            let MirrorTextLength = self.MirrorForm.MirrorName.length
            self.MirrorForm.MirrorNameNum = 20 - MirrorTextLength
        },
        // 镜像简介
        MirrorDescInput(){
            let self = this
            let MirrorTextLength = self.MirrorForm.MirrorDesc.length;
            self.MirrorForm.MirrorDescNum = 200 - MirrorTextLength
        },
        // 修改镜像保存
        MirrorFormSave(form){
            let self = this

            self.$refs[form].validate((valid) => {
                if (valid) {
                    let data = {}
                    if(self.tag == 1){
                        self.$http.post('/tes/image',{
                            imageName: self.MirrorForm.MirrorName,
                            icon: self.MirrorForm.iconId,
                            imageNameInDocker: self.MirrorForm.DockerMirrorName,
                            description: self.MirrorForm.MirrorDesc
                        }).then(response => {
                            let res = response.data
                            if(res.code == '200'){
                                self.$message({
                                    message: '添加成功',
                                    type: 'success'
                                })
                                self.dialogMirrorInfo = false
                                // 初始化镜像列表
                                self.InitImageList()

                            }else{
                                self.$message.error(res.message)
                            }
                        }).catch(err => {
                            console.log(err)
                        })
                    }else{
                        self.$http.put('/tes/image/'+self.MirrorForm.imageId,{
                            imageName: self.MirrorForm.MirrorName,
                            icon: self.MirrorForm.iconId,
                            description: self.MirrorForm.MirrorDesc,
                            imageNameInDocker: self.MirrorForm.DockerMirrorName
                        }).then(response => {
                            let res = response.data
                            if(res.code == '200'){
                                self.$message({
                                    message: '修改成功',
                                    type: 'success'
                                })
                                self.dialogMirrorInfo = false
                                // 初始化镜像列表
                                self.InitImageList()

                            }else{
                                self.$message.error(res.message)
                            }
                        }).catch(err => {
                            console.log(err)
                        })
                    }

                }
            })
        },
        // 搜索镜像类型
        SelectFn() {
            let self = this
            self.InitImageList()
        },
        // 批量删除
        BatchDelete() {
            let self = this
            if(self.multipleSelection.length == 0){
                self.$message({
                    message: '请选择要删除的镜像',
                    type: 'warning'
                })
                return
            }
            self.$confirm('是否删除选中的镜像?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                self.$http.post('/tes/image/delete?force='+self.force ,self.multipleSelection).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.$message({
                            message: '删除成功',
                            type: 'success'
                        })
                        self.force = false
                        self.InitImageList()
                    }else if(res.code == '500400'){
                         // 强制删除提示
                        self.$confirm(res.message, '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            self.force = true
                            self.multipleSelection = res.data
                            self.BatchDelete()
                        }).catch(() => {
                            self.InitImageList()
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            }).catch(() => {
            })
        }
    }
}
</script>

<style lang="scss">
    #mirror-manage{
        padding-bottom: 40px;
        // 搜索样式
        .search-box{
            margin-top: 30px;
        }
        // 镜像信息弹窗
        .dialog-add-distribution{
            .el-dialog__body{
                min-height:350px;
            }
            .el-form{
                .el-form-item{
                    position: relative;
                    .el-form-item__content{
                        height: auto;
                    }
                    .el-input{
                        .el-input__inner{
                            width:230px;
                        }
                    }
                    .el-textarea{
                        height: 180px;
                        .el-textarea__inner{
                            width:600px;
                            resize: none;
                        }
                    }
                }
            }
            .distribution-swpier{
                position: relative;
                width: 700px;
                height: 64px;
                margin-bottom: 35px;
                margin-left: 55px;
                margin-top: 15px;
                .swiper-btn{
                    background-image: none;
                    outline: 0;
                    top: 46px;
                    i{
                        font-size: 20px;
                        color: #b1b1b1;
                        &:hover{
                            color: #474747;
                        }
                    }
                }
                .swiper-button-prev{
                    left: -35px;
                }
                .swiper-button-next{
                    right: -35px;
                }
            }
            .distribution-box{
                position: relative;
                width: 100%;
                height: 64px;
                line-height: 64px;
                background: #fff;
                border: solid 1px #d9d9d9;
                border-radius: 5px;
                text-align: center;
                cursor: pointer;
                box-sizing: border-box;
                img{
                    width: 100%;
                }
                &:hover{
                    border-color: #1277eb;
                }
                i{
                    position: absolute;
                    bottom: 28px;
                    right: 8px;
                    font-size: 14px;
                    color: #3fdb9b;
                    width: 14px;
                    height: 14px;
                }
            }
        }
    }
</style>

<style lang="scss" scoped>
    #mirror-manage{
        .jx-manage-tips{
            width: 80%;
            margin: 60px auto 0;
            p{
                font-size: 14px;
                color: #385899;
                line-height: 18px;
            }
        }
    }
</style>

